<template>
  <view class="swiperview">
    <view class="bgimg" v-if="indexshow" @click="disappear">
      <image src="../../static/logo2.png" mode="" class="logo1"></image>
    </view>

    <view class="skip">
      <span @click="goindex">跳过</span>
    </view>
    <view class="uni-margin-wrap">
      <swiper
        class="swiper"
        circular
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
      >
        <swiper-item v-for="item in swiperlist">
          <view class="swiper-item">
            <img class="swiper-img" :src="item.url" alt="" />
            <view class="swiper-msg">
              <view class="swiper-msg_title">{{ item.title }}</view>
              <view class="swiper-msg_title1"
                >只需花费一顿周末大餐的费用
                你就将拥有一块不需要自己打理的有机农田</view
              >
            </view>
            <view class="swiper_bottom" @click="goindex"
              >点击进入 云上农夫</view
            >
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      indexshow: true,
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      swiperlist: [
        {
          id: 1,
          title: "诗和远方",
          content:
            "只需花费一顿周末大餐的费用你就将拥有一块不需要自己打理的有机农田",
          url: "https://img2.baidu.com/it/u=1658661101,2526079767&fm=253&fmt=auto&app=138&f=JPEG",
        },
        {
          id: 2,
          title: "云端种菜",
          content: "新农人为你种菜用专业技术赋能你的菜地",
          url: "https://img2.baidu.com/it/u=2679604921,198030706&fm=253&fmt=auto&app=138&f=JPEG",
        },
        {
          id: 3,
          title: "农事提醒",
          content:
            "该播种、除草、施肥、浇水、收获，物流提醒只需要在手机端操作即可",
          url: "https://img2.baidu.com/it/u=1196922468,2629382564&fm=253&fmt=auto&app=138&f=JPEG",
        },
        {
          id: 4,
          title: "团建研学聚会",
          content: "享受户外大自然的馈赠和快乐",
          url: "https://img2.baidu.com/it/u=4073923525,4061412068&fm=253&fmt=auto&app=120&f=JPEG",
        },
      ],
    };
  },
  mounted() {
    let timer = 1;
    setTimeout(() => {
      this.indexshow = false;
      clearTimeout(timer);
      console.log(timer);
    }, 1500);
  },
  methods: {
    disappear() {
      this.indexshow = false;
    },
    goindex() {
      uni.switchTab({
        url: "/pages/mine/index",
      });
    },
    changeIndicatorDots(e) {
      this.indicatorDots = !this.indicatorDots;
    },
    changeAutoplay(e) {
      this.autoplay = !this.autoplay;
    },
    intervalChange(e) {
      this.interval = e.target.value;
    },
    durationChange(e) {
      this.duration = e.target.value;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

page {
  width: 100%;
}

.bgimg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  background-size: 250rpx;
  z-index: 999;
}

.logo1 {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 380rpx;
  height: 380rpx;
  transform: translate(-50%);
}

.swiperview {
  font-family: "Poppins";
  height: calc(100vh - 120rpx);
  width: 100%;
  padding-top: 120rpx;
}

.skip {
  text-align: left;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
}

.uni-margin-wrap {
  background-color: skyblue;
  width: 100%;
  height: 96%;
}

.swiper {
  height: 100%;
}

.swiper-item {
  display: block;
  height: 100%;
  position: relative;

  .swiper-img {
    width: 100%;
    height: 100%;
  }

  .swiper-msg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    padding: 30rpx 40rpx;

    .swiper-msg_title {
      font-size: 50rpx;
      font-weight: 600;
      color: #ffffff;
      margin-bottom: 25rpx;
    }

    .swiper-msg_title1 {
      font-size: 26rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 40rpx;
    }
  }

  .swiper_bottom {
    position: absolute;
    left: 50%;
    bottom: 50rpx;
    z-index: 100;
    transform: translate(-50%);
    width: 80%;
    height: 70rpx;
    line-height: 70rpx;
    border-radius: 24px;
    background: #eea427;
    color: #fff;
    font-size: 24rpx;
    font-weight: bold;
    text-align: center;
  }
}
</style>